<template>
  <div class="project">
    <x-header style="background-color:#FF5D38;" :left-options="{backText: ''}">
      项目详情
      <div @click="goreport" slot="right">举报</div>
    </x-header>
     <div class="project-head-img">
      <img :src="imageUrl.imageUrl + eventAll.eventPicUrl"/>
     </div>
     <div class="project-content">
      <div class="pro-content">
        <p><em class="content-title" v-html="eventAll.eventName"></em><span class="content-right">{{isM}}</span>
        <span class="content-collection">{{eventType}}</span></p>
        <div class="content-text" v-html="eventAll.eventAbstract">
        </div>
        <ul>
          <li style="text-align: left">
            <span><i class="iconfont head-icon">&#xe63d;</i><span>目标金额</span></span>
            <p style="margin-left: 4px"><em>{{eventAll.eventGoalAmount}}</em>元</p>
          </li>
          <li style="text-align: center">
            <span><i class="iconfont head-icon" style="font-size: 18px;">&#xe628;</i><span>已募金额</span></span>
            <p style="text-align: center;margin-left: 10px"><em>{{eventAll.raiseMoney}}</em>元</p>
          </li>
          <li style="text-align: right">
            <span><i class="iconfont head-icon" style="font-size: 22px">&#xe626;</i><span>募捐人数</span></span>
            <p style="text-align: right;margin-right: 10px"><em>{{eventAll.raisePeople}}</em>人</p>
          </li>
        </ul>
      </div>
     </div>
     <div class="con-list">
       <div>
         <tab :line-width=2 v-model="index" custom-bar-width="60px" bar-active-color="#FF5D38">
           <tab-item class="vux-center" @on-item-click="witchShow = 'xiangqing'">
            项目详情
           </tab-item>
           <tab-item class="vux-center" @on-item-click="witchShow = 'danwei'">
             发起单位
           </tab-item>
           <tab-item class="vux-center" @on-item-click="witchShow = 'jilu'">
             捐款记录
           </tab-item>
           <tab-item class="vux-center tab-item-xx" :badge-label="isXinxi" @on-item-click="witchShow = 'fankui'">
             信息反馈
           </tab-item>
         </tab>
         <!--<swiper v-model="index" :show-dots="false" :threshold="threshold" :min-moving-distance="minmovingdistance">-->
           <div class="details" v-if="witchShow == 'xiangqing'" >
             <div class="detailsContent" v-html="eventAll.eventContent"></div>
             <!--项目详情-->
             <!--<h3>本次“爱心助跑圆梦大学”活动旨在通过与企业和社会各界的互动，整合社会资源，凝聚社会力量，弘扬关注弱势群体，关爱他人的良好风尚。</h3>-->
             <!--<p>一、主办单位：共青团金华市委</p>-->
             <!--<p>二、活动时间：2017年7月&#45;&#45;2017年8月</p>-->
             <!--<p>三、活动地点：金华城区</p>-->
             <!--<p>四、资助对象：居住在金华城区的被全国普通高等学校录取的品学兼优、家庭经济困难的大学新生</p>-->
             <!--<p>五、活动内容：帮助月40名贫困大学新生解决第一年部分或全部学费（3000-5000元不等，平均4000元*40人，共需筹集资金约16万元）</p>-->
             <!--<div class="image">-->
               <!--<h2>2016年发放仪式现场</h2>-->
               <!--<div class="image-box">-->
                 <!--<img src="../../images/head-li.png" alt="">-->
               <!--</div>-->
             <!--</div>-->
             <div class="btn">
               <flexbox>
                 <flexbox-item>
                   <x-button type="primary" @click.native="wantJuank"><i class="iconfont head-icon" style="font-size: 18px;">&#xe625;</i> 我要捐款</x-button>
                 </flexbox-item>
                 <flexbox-item>
                   <x-button type="primary" @click.native="godonation"><i class="iconfont head-icon" style="font-size: 18px">&#xe627;</i> 邀朋友一起捐</x-button>
                 </flexbox-item>
               </flexbox>
             </div>
           </div>
           <div class="company" v-else-if="witchShow == 'danwei'">
             <!--发起单位-->
             <div class="pro">
               <div class="pro-image">
                 <img :src="eventAll.organization[0].registrationUrl" alt="">
               </div>
               <h2 v-html="eventAll.organization[0].organizationName"></h2>
               <h3>联系人：{{eventAll.organization[0].lianxiName}}</h3>
               <h4>联系电话：{{eventAll.organization[0].lianxiMobile}}</h4>
             </div>

             <div class="briefIntroduction">
               <!--组织简介-->
               <div class="briefIntroduction-box">
                 <i class="iconfont head-icon" style="color: #379cee;">&#xe636;</i><span>组织简介</span>
               </div>
               <p v-html="eventAll.organization[0].organizationIntro"></p>
             </div>
             <div class="otherProjects">
               <!--该单位发起的其他项目-->
               <div class="otherProjects-box">
                 <i class="iconfont head-icon" style="color: #e1a922;">&#xe637;</i><span>该单位发起的其他项目</span>
               </div>
               <div class="otherProjects-content">
                 <div>
                   <flexbox v-for="eventOthers in eventOther">
                     <flexbox-item :span="4">
                       <div class="item-image">
                         <img :src="eventOthers.eventPicUrl" alt="">
                       </div>
                     </flexbox-item>
                     <flexbox-item>
                       <h3 class="item-title" v-html="eventOthers.eventName">梦想足球场 圆农村孩子的足球梦想地方否地方对方答复</h3>
                       <div class="progress" v-if="eventOthers.eventStatus == 1">
                         <span>{{eventOthers.schedule}}%</span>
                         <x-progress :percent="eventOthers.schedule" :show-cancel="false"></x-progress>
                       </div>
                       <div class="item-mujuan">
                         <span>已筹</span><em>{{eventOthers.raiseMoney}}</em><span>元</span>
                         <div style="float: right" v-if="eventOthers.eventStatus == 1"><span>参加</span><em>{{eventOthers.raisePeople}}</em><span>人次</span></div>
                         <div class="item-jsbtn" v-if="eventOthers.eventStatus == 4">募捐结束</div>
                       </div>
                     </flexbox-item>
                   </flexbox>
                 </div>
               </div>
               <div class="more-btn-box">
                 <div class="more-btn" @click="moreOtherProjects" v-model="lookMore">{{lookMore}}</div>
               </div>
             </div>
             <div class="btn">
               <flexbox>
                 <flexbox-item>
                   <x-button type="primary" @click.native="wantJuank"><i class="iconfont head-icon" style="font-size: 18px;">&#xe625;</i> 我要捐款</x-button>
                 </flexbox-item>
                 <flexbox-item>
                   <x-button type="primary" @click.native="godonation"><i class="iconfont head-icon" style="font-size: 18px">&#xe627;</i> 邀朋友一起捐</x-button>
                 </flexbox-item>
               </flexbox>
             </div>
           </div>
           <div class="record" v-else-if="witchShow == 'jilu'">
             <!--捐款记录-->
             <div class="list">
               <div class="aList" v-for="eventJuankuans in eventJuankuan">
                 <div class="aList-image">
                   <img :src="eventJuankuans.headUrl" alt="">
                 </div>
                 <div class="aList-content">
                   <span class="nickName">{{eventJuankuans.nickname}}</span>
                   <span class="aList-time" v-if="eventJuankuans.pastTime != ''">{{eventJuankuans.pastTime}}</span>
                   <span class="aList-money">捐助<em>{{eventJuankuans.amount}}</em>元</span>
                 </div>
               </div>
             </div>

             <div class="more-btn-box">
               <div class="more-btn" @click="moreOtherJuankuans" v-model="lookMoreJuankuans">{{lookMoreJuankuans}}</div>
             </div>

             <div class="btn">
               <flexbox>
                 <flexbox-item>
                   <x-button type="primary" @click.native="wantJuank"><i class="iconfont head-icon" style="font-size: 18px;">&#xe625;</i> 我要捐款</x-button>
                 </flexbox-item>
                 <flexbox-item>
                   <x-button type="primary" @click.native="godonation"><i class="iconfont head-icon" style="font-size: 18px;">&#xe627;</i> 邀朋友一起捐</x-button>
                 </flexbox-item>
               </flexbox>
             </div>
           </div>
           <div class="details" v-else-if="witchShow == 'fankui'">
             <div v-if="eventAll.feedBack != ''" v-html="eventAll.feedBack[0].feedback"></div>
             <div v-else>暂无信息反馈</div>
             <!--信息反馈  和项目详情一样只是少了捐款按钮-->
             <!--<h3>本次“爱心助跑圆梦大学”活动旨在通过与企业和社会各界的互动，整合社会资源，凝聚社会力量，弘扬关注弱势群体，关爱他人的良好风尚。</h3>-->
             <!--<p>一、主办单位：共青团金华市委</p>-->
             <!--<p>二、活动时间：2017年7月&#45;&#45;2017年8月</p>-->
             <!--<p>三、活动地点：金华城区</p>-->
             <!--<p>四、资助对象：居住在金华城区的被全国普通高等学校录取的品学兼优、家庭经济困难的大学新生</p>-->
             <!--<p>五、活动内容：帮助月40名贫困大学新生解决第一年部分或全部学费（3000-5000元不等，平均4000元*40人，共需筹集资金约16万元）</p>-->
             <!--<div class="image">-->
               <!--<h2>2016年发放仪式现场</h2>-->
               <!--<div class="image-box">-->
                 <!--<img src="../../images/head-li.png" alt="">-->
               <!--</div>-->
             <!--</div>-->

           </div>
         <!--</swiper>-->
       </div>
     </div>

    <div class="popup">
      <div>
        <popup v-model="show" :hide-on-blur=true>
          <div class="popup2">
            <group>
              <cell title="请输入捐款金额">
                <x-icon type="ios-close-empty" size="24" @click="isShow"></x-icon>
              </cell>
            </group>
            <checker
              style="padding-top: 10px"
              v-model="demo"
              default-item-class="demo5-item"
              selected-item-class="itemselected"
              :radio-required="true"
              @on-change="checkerWitch()"
            >
              <checker-item v-for="i in [10, 20, 50, 100, 1000]" :value="i">{{i}}元</checker-item>
              <checker-item class="qitajine" :value="textMoney" v-bind:class="{ itemselected: ifselected}">
                <input type="number" @keyup="keyups" @blur="blurs" placeholder="其他金额"
                       style="width: 66%;height: 73%;border: none;" v-model="textMoney">
              </checker-item>
            </checker>
            <group v-show="ifShowtt" style="margin-top: 20px">
              <cell title="其他信息（非必填）"></cell>
              <p class="otherTi">*如填写，您的捐赠信息将纳入个人信用体系</p>
            </group>
            <group v-show="ifShowtt" title="" style="margin-top: 10px" class="allGroup">
              <x-input class="allInput" v-model="name" title="" placeholder="您的姓名"></x-input>
            </group>
            <group v-show="ifShowtt" title="" class="allGroup">
              <x-input type="number" class="allInput" title="" ref="mobile" v-model="mobile" is-type="china-mobile"
                       placeholder="您的电话"></x-input>
            </group>
            <group v-show="ifShowtt" title="" class="allGroup">
              <x-input class="allInput" title="" ref="IDNum" v-model="IDNum" :is-type="isID"
                       placeholder="您的身份证号码"></x-input>
            </group>
            <group style="margin-top: 20px">
              <cell title="我的留言（非必填）"></cell>
            </group>
            <group title="" class="allGroup">
              <x-textarea class="allTextarea" v-model="liuyan" placeholder="给他们一些鼓励的话吧" :show-counter="false" :rows="1"
                          autosize></x-textarea>
            </group>
            <x-button type="primary" @click.native="primary">立刻捐款</x-button>
            <div>
              <input type="checkbox" value="" v-model="checkOK" @change="checkOk" style="margin-bottom: 2px">
              <span style="color: #999999;font-size: 14px">同意并接受</span>
              <router-link :to="{path: '/aboutqyc', query: {witchOne: 'tiaokuan'}}"><em style="font-size: 14px">《青援筹用户协议》</em>
              </router-link>
            </div>
            <!--适应苹果手机-->
            <div style="width: 100%;height: 20px"></div>
          </div>
        </popup>
      </div>
    </div>
   </div>
</template>
<style lang="scss" src='./index.scss'></style>
<script src="./project-details.js"></script>
